<template>
  <div class="organization">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple Tree">
          <!-- 树 -->
          <el-tree
            :data="TreeDataList"
            highlight-current
            :props="defaultProps"
            node-key="id"
            icon-class=" "
            default-expand-all
            :default-checked-keys="checkedKeys"
            :current-node-key="currentNodeKey"
            @node-click="handleNodeClick"
          >
            <!-- 树图标的插槽 -->
            <span slot-scope="{ node, data }">
              <i v-if="node.level===1" style="color: blue;" :class="node.expanded?'el-icon-folder-remove':'el-icon-folder-add'" />
              <i v-else-if="node.level===2" :class="node.expanded?'el-icon-remove-outline':'el-icon-circle-plus-outline'" />
              <i v-else class="" />
              {{ data.name }}
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple o-message">
              <!-- 机构信息 -->
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>机构信息</span>
                </div>
                <el-form ref="numberValidateForm" :model="organizationManageForm" label-width="120px" class="demo-ruleForm">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item
                        label="机构编号"
                        prop="id"
                      >
                        <el-input v-model.number="organizationManageForm.id" :disabled="true" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label="机构名称"
                        prop="name"
                      >
                        <el-input v-model.number="organizationManageForm.name" :disabled="true" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label="机构类型"
                        prop="type"
                      >
                        <el-input v-model.number="organizationManageForm.type" :disabled="true" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-form-item label="机构地址">
                      <el-col :span="8">
                        <el-select v-model="organizationManageForm.province.name" :disabled="isFormDisabled" style="width:100%" placeholder="请选择省">
                          <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-col>

                      <el-col :span="8">
                        <el-select v-model="organizationManageForm.city.name" :disabled="isFormDisabled" style="width:100%" placeholder="请选择市">
                          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-col>

                      <el-col :span="8">
                        <el-select v-model="organizationManageForm.county.name" :disabled="isFormDisabled" style="width:100%" placeholder="请选择区">
                          <el-option v-for="item in countyList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-col>

                    </el-form-item>
                  </el-row>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item
                        label="详细地址"
                        prop="address"
                      >
                        <el-input v-model.number="organizationManageForm.address" :disabled="isFormDisabled" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label="经度"
                        prop="longitude"
                      >
                        <el-input v-model.number="organizationManageForm.longitude" :disabled="true" autocomplete="off">
                          <template slot="append">E</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label="纬度"
                        prop="latitude"
                      >
                        <el-input v-model.number="organizationManageForm.latitude" :disabled="true" autocomplete="off">
                          <template slot="append">N</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item
                        label="机构负责人"
                        prop="managerName"
                      >
                        <el-input v-model.number="organizationManageForm.managerName" :disabled="isFormDisabled" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label="机构电话"
                        prop="phone"
                      >
                        <el-input v-model.number="organizationManageForm.phone" :disabled="isFormDisabled" autocomplete="off" />
                      </el-form-item>
                    </el-col>

                  </el-row>

                  <el-form-item class="submitBtn-item">
                    <el-button class="submitBtn" type="primary" @click="submitForm">{{ isFormDisabled===true?'编辑':'保存' }}</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple s-message">
              <!-- 员工信息 -->
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>员工信息</span>
                </div>

                <el-table
                  :data="organizationTableData"
                  :row-class-name="tableRowClassName"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="100"
                  />
                  <el-table-column
                    prop="userId"
                    label="员工编号"
                    width="180"
                  />
                  <el-table-column
                    prop="name"
                    label="员工姓名"
                  />
                  <el-table-column
                    prop="mobile"
                    label="手机号"
                  />
                  <el-table-column
                    prop="agency.name"
                    label="所属机构"
                  />
                  <el-table-column
                    prop="account"
                    label="系统账户"
                  />
                  <el-table-column
                    prop="roleNames[0]"
                    label="系统角色"
                  />
                  <el-table-column
                    prop="status"
                    label="账号状态"
                    :formatter="formatStatus"
                  />
                </el-table>
                <el-pagination
                  style="text-align:center;margin-top:15px;"
                  :current-page.sync="pageForm.page"
                  :page-sizes="[5, 10, 20, 50]"
                  :page-size="5"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="counts"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getorGanizationApi, getTreeApi, getAreasApi, getCourierPageApi } from '@/api/organizationManage'
export default {
  data() {
    return {
      // 分页 总页
      counts: 1,
      // 省
      provinceList: {},
      // 市
      cityList: [],
      // 区
      countyList: [],
      // 禁用表单
      isFormDisabled: true,
      // 树状图的列表
      TreeDataList: [],
      // 修改树状图label为name
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 当前高亮的树节点 id
      currentNodeKey: 1,
      checkedKeys: [],
      // 机构信息
      organizationManageForm: {
        province: {}, // 所属省份
        city: {}, // 所属城市
        county: {}, // 所属区县
        parent: {}, // 父级机构
        id: '', // id
        name: '', // 名称
        type: '', // 类型，1:一级转运，2：二级转运，3:网点
        phone: '', // 电话
        address: '', // 地址
        latitude: '', // 纬度
        longitude: '', // 经度
        parentId: '', // 父节点id
        managerName: '', // 负责人
        extra: '', // 扩展字段，以json格式存储
        status: ''// 是否可用
      },
      organizationTableData: [],
      pageForm: {
        agentId: localStorage.getItem('selectedNodeKey'), // 机构ID
        page: 1, // 页码
        pageSize: 5 // 一页多少条数据
      }
    }
  },
  created() {
    // 获取树信息
    this.getTreeList()
    const storedNodeKey = localStorage.getItem('selectedNodeKey')
    if (storedNodeKey) {
      // 在本地存储中存在节点信息时，设置初始选中节点和高亮节点
      this.checkedKeys = [storedNodeKey]
      this.currentNodeKey = storedNodeKey
      this.handleNodeClick({ id: this.currentNodeKey })
    }
    // 获取表格信息
    this.getCourierPage()
  },
  methods: {
    // 获取树状机构信息
    async getTreeList() {
      const res = await getTreeApi()
      // console.log(JSON.parse(res.data))
      this.TreeDataList = JSON.parse(res.data)
    },
    // 点数树拿到数据
    async handleNodeClick(data) {
      const res = await getorGanizationApi(data.id)
      // console.log(res)
      this.organizationManageForm = res.data

      this.checkedKeys = [data.id]
      this.currentNodeKey = data.id
      // 存储到本地
      localStorage.setItem('selectedNodeKey', data.id)
      this.pageForm.agentId = data.id
      this.getCourierPage()
    },
    // 编辑
    async submitForm(formName) {
      this.isFormDisabled = !this.isFormDisabled
      if (!this.isFormDisabled) {
        // 省市区数据存到data
        const province = await getAreasApi()
        const city = await getAreasApi(this.organizationManageForm.province.id)
        const county = await getAreasApi(this.organizationManageForm.city.id)
        this.provinceList = province.data
        this.cityList = city.data
        this.countyList = county.data
      } else {
        this.$message.error('很抱歉，演示系统，不允许修改')
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 表格隔行显示不同样式
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
      return ''
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.pageForm.page = val
      this.getCourierPage()
    },
    async getCourierPage() {
      // const res = await getEmployeePageApi(this.pageForm)
      const res = await getCourierPageApi(this.pageForm)
      // console.log(res)
      this.counts = +res.data.counts
      this.organizationTableData = res.data.items
    },
    // 账号状态
    formatStatus(row) {
      return row.status === 1 ? '正常' : '休息'
    }
  }
}

</script>

<style scoped>
.el-table .warning-row {
    background: #f5f7fa;
  }
.submitBtn-item{
  display: flex;
  justify-content: center;

}
.submitBtn{
  background-color: #e15536;
  border: none;
  width: 80px;
}
.organization{
  margin:0 20px;
}
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #fff;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .Tree{
    min-height: 800px;
    padding: 15px;
  }
  .o-message{
    min-height: 200px;
  }
   .s-message{
    min-height: 200px;
  }
  .el-card__header{
    background-color: #fafafa;
  }
</style>
